<?php
$id_module = rand(0, 1000);
$button_wishlist = $this->language->get('button_wishlist');
$button_compare = $this->language->get('button_compare');
$this->load->model('module/treoden_cpanel');
$store_id=$this->config->get('config_store_id');
$config_info = $this->model_module_treoden_cpanel->getSetting($store_id);
?>
<div class="box products-tabs-box">
<section id="options-<?php echo $id_module;?>" class="clearfix box-heading">
<ul id="filters-<?php echo $id_module;?>" class="option-set clearfix" data-option-key="filter">
<?php 
$i=0;
$products_array = array();
?>
<?php foreach($tabs as $key=>$value) : ?>
	<?php 
	$i++;
	if(isset($value['products'])){
	foreach($value['products'] as $product)
		$products_array[] = $product;
	}	
	?>
	<li><a href="#filter" data-option-value=".filter-data-<?php echo $i;?>" class="<?php if($i==1) echo 'selected';?>"><?php echo $value['title'];?></a></li>
<?php endforeach;?>	
</ul>
<?php $products_array = array_unique($products_array, SORT_REGULAR);?>
</section>
<div id="products-tab-containner-<?php echo $id_module;?>" class="box-content clearfix product-grid">
	<?php foreach($products_array as $product) : ?>
		<?php
		$i=0;
		$class='';
		foreach($tabs as $key=>$value){ 
			$i++;
			if(isset($value['products']) and in_array($product, $value['products']))
				$class = $class." filter-data-".$i;
		}
		?>
		<div class="product-item element transition <?php echo $class;?>" data-category="<?php echo $class;?>">
				<div class="col-inner">
					<div>
					<div class="image"><a data-id="<?php echo $product['product_id']; ?>" href="<?php echo $product['href']?>"><img alt="iPhone" src="<?php echo $product['thumb']?>"></a></div>
					<div class="product-info">
						<div class="name"><a href="<?php echo $product['href']?>"><?php echo $product['name']?></a></div>
						<?php
						$this->load->model('catalog/product');
						$product_info = $this->model_catalog_product->getProduct($product['product_id']);
						echo "<div class='description'>";
						echo utf8_substr(strip_tags(html_entity_decode($product_info['description'], ENT_QUOTES, 'UTF-8')), 0, 100) . '...';
						echo "</div>";
						?>
						<?php if ($product['rating']) { ?>
						<div class="rating">
							<!--img src="catalog/view/theme/<?php echo $this->config->get('config_template');?>/image/stars-<?php echo $product['rating']; ?>.png" alt="<?php echo $product['reviews']; ?>" /-->
							<div class="rating-maximum"><span class="icon-star4"></span><span class="icon-star4"></span><span class="icon-star4"></span><span class="icon-star4"></span><span class="icon-star4"></span></div>
							<div class="raring-value" style="width:<?php echo $product['rating']*20?>%">
							<span class="icon-star4"></span><span class="icon-star4"></span><span class="icon-star4"></span><span class="icon-star4"></span><span class="icon-star4"></span>
							</div>
						</div>
						<?php } ?>
						<?php if ($product['price']) { ?>
						<div class="price">
						  <?php if (!$product['special']) { ?>
						  <?php echo $product['price']; ?>
						  <?php } else { ?>
						  <span class="price-old"><?php echo $product['price']; ?></span> <span class="price-new"><?php echo $product['special']; ?></span>
						  <?php } ?>
						</div>
						<?php } ?>
						<div class="cart"><input type="button" value="<?php echo $button_cart; ?>" onclick="addToCart('<?php echo $product['product_id']; ?>');" class="button" /></div>
						<div class="wishlist"><a onclick="addToWishList('<?php echo $product['product_id']; ?>');"><?php echo $button_wishlist; ?></a></div>        
						<div class="compare"><a onclick="addToCompare('<?php echo $product['product_id']; ?>');"><?php echo $button_compare; ?></a></div>
					</div>
					</div>
				</div>
		</div>
	<?php endforeach;?>		
</div>
<script type="text/javascript"><!--
    $(window).load(function() {
		var owl = $("#products-tab-containner-<?php echo $id_module;?>");
		var baseWidth = $("#products-tab-containner-<?php echo $id_module;?>").parents('.modules-container').attr('data-width') ? parseInt($("#products-tab-containner-<?php echo $id_module;?>").parents('.modules-container').attr('data-width')) : parseInt(<?php echo $config_info['main_width'];?>);
		var numItem = parseInt(<?php echo $columns;?>);
		var itemWidth = parseInt(baseWidth/numItem);
		itemsCustom= new Array()
		itemsCustom[0] = new Array(0,1);
		for (var i=1;i < numItem;i++){ 
			itemsCustom[i] = new Array(baseWidth-((numItem-i-1)*itemWidth + itemWidth/2), i+1);
		}
		for (var i=numItem-1;i >=0;i--){
			if($(owl).width() >= itemsCustom[i][0]){
				if(itemsCustom[i][1]!=1){
					//$(owl).find('.product-item').removeClass('pure-u-1').removeClass('pure-u-1-2').removeClass('pure-u-1-3').removeClass('pure-u-1-4').removeClass('pure-u-1-5').removeClass('pure-u-1-6');
					//$(owl).find('.product-item').addClass('pure-u-1-'+itemsCustom[i][1]);
					var columnWidth = parseInt($(owl).width()/itemsCustom[i][1]);
					$(owl).find('.product-item').css('width',columnWidth);
				}else{
					//$(owl).find('.product-item').removeClass('pure-u-1').removeClass('pure-u-1-2').removeClass('pure-u-1-3').removeClass('pure-u-1-4').removeClass('pure-u-1-5').removeClass('pure-u-1-6');
					//$(owl).find('.product-item').addClass('pure-u-1');
					var columnWidth = parseInt($(owl).width());
					$(owl).find('.product-item').css('width',columnWidth);
				}	
				//treodenClass(owl,itemsCustom[i][1]);
				owl.isotope({
					itemSelector : '.element',
					filter: '.filter-data-1',
				});
				return;
			}
		}
    });
	if ( !$.browser.msie || ($.browser.msie && $.browser.version >= 9)) {
		$(window).resize(function(){
			var owl = $("#products-tab-containner-<?php echo $id_module;?>");
			var baseWidth = $("#products-tab-containner-<?php echo $id_module;?>").parents('.modules-container').attr('data-width') ? parseInt($("#products-tab-containner-<?php echo $id_module;?>").parents('.modules-container').attr('data-width')) : parseInt(<?php echo $config_info['main_width'];?>);
			var numItem = parseInt(<?php echo $columns;?>);
			var itemWidth = parseInt(baseWidth/numItem);
			itemsCustom= new Array()
			itemsCustom[0] = new Array(0,1);
			for (var i=1;i < numItem;i++){ 
				itemsCustom[i] = new Array(baseWidth-((numItem-i-1)*itemWidth + itemWidth/2), i+1);
			}
			for (var i=numItem-1;i >=0;i--){
				if($(owl).width() >= itemsCustom[i][0]){
					if(itemsCustom[i][1]!=1){
						//$(owl).find('.product-item').removeClass('pure-u-1').removeClass('pure-u-1-2').removeClass('pure-u-1-3').removeClass('pure-u-1-4').removeClass('pure-u-1-5').removeClass('pure-u-1-6');
						//$(owl).find('.product-item').addClass('pure-u-1-'+itemsCustom[i][1]);
						var columnWidth = parseInt($(owl).width()/itemsCustom[i][1]);
						$(owl).find('.product-item').css('width',columnWidth);
					}else{
						//$(owl).find('.product-item').removeClass('pure-u-1').removeClass('pure-u-1-2').removeClass('pure-u-1-3').removeClass('pure-u-1-4').removeClass('pure-u-1-5').removeClass('pure-u-1-6');
						//$(owl).find('.product-item').addClass('pure-u-1');
						var columnWidth = parseInt($(owl).width());
						$(owl).find('.product-item').css('width',columnWidth);
					}	
					//treodenClass(owl,itemsCustom[i][1]);
					owl.isotope({
						itemSelector : '.element',
						filter: '.filter-data-1',
					});
					return;
				}
			}
		})
	}
//--></script>
<script type="text/javascript"><!--
$(document).on("gridLoaded",function(){
      var $container = $('#products-tab-containner-<?php echo $id_module;?>');
      var $optionSets = $('#options-<?php echo $id_module;?> .option-set'),
          $optionLinks = $optionSets.find('a');
      $optionLinks.click(function(){
        var $this = $(this);
        // don't proceed if already selected
        if ( $this.hasClass('selected') ) {
          return false;
        }
        var $optionSet = $this.parents('.option-set');
        $optionSet.find('.selected').removeClass('selected');
        $this.addClass('selected');
  
        // make option object dynamically, i.e. { filter: '.my-filter-class' }
        var options = {},
            key = $optionSet.attr('data-option-key'),
            value = $this.attr('data-option-value');
        // parse 'false' as false boolean
        value = value === 'false' ? false : value;
        options[ key ] = value;
        if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
          // changes in layout modes need extra logic
          changeLayoutMode( $this, options )
        } else {
          // otherwise, apply new options
          $container.isotope( options );
        }
        
        return false;
      });

      
    });
//--></script>
</div>